<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="设置"
    width="450px"
    @close="emits('closeDialog')"
  >
    <el-form ref="dialogFormRef" :model="dialogForm">
      <el-form-item label="隐藏" :label-width="formLabelWidth">
        <el-switch
          v-model="dialogForm.is_hide"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="已隐藏"
          inactive-text="未隐藏"
        />
      </el-form-item>
      <el-form-item label="推荐" :label-width="formLabelWidth">
        <el-switch
          v-model="dialogForm.is_recommend"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="已推荐"
          inactive-text="未推荐"
        />
      </el-form-item>
      <el-form-item label="热门" :label-width="formLabelWidth">
        <el-switch
          v-model="dialogForm.is_hot"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="已热门"
          inactive-text="未热门"
        />
      </el-form-item>
      <el-form-item label="横屏" :label-width="formLabelWidth">
        <el-switch
          v-model="dialogForm.is_horizontal"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="已横屏"
          inactive-text="未横屏"
        />
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.priority" placeholder="排序" />
      </el-form-item>
      <el-form-item label="在线人数" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.online_number" placeholder="在线人数" />
      </el-form-item>
      <el-form-item label="评分" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.score" placeholder="评分" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";

const dialogFormRef = ref(null);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      game_id: "",
      is_hide: "",
      is_recommend: "",
      is_hot: "",
      is_horizontal: "",
      priority: "",
      online_number:"",
      score:"",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "120px";

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = {
          ...dialogForm,
          is_hide: dialogForm.is_hide ? 1 : 0,
          is_recommend: dialogForm.is_recommend ? 1 : 0,
          is_hot: dialogForm.is_hot ? 1 : 0,
          is_horizontal: dialogForm.is_horizontal ? 1 : 0,
          priority: Number(dialogForm.priority),
          online_number: Number(dialogForm.online_number),
          score: Number(dialogForm.score),
        };
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
